uniapp配置vuex

2023-03-24 11:04| 来源: 网络整理| 查看: 265

1. 在根目录上新建 store 目录，并在此目录下新建 store.js 文件，在此文件下写如下代码：

注意：uniapp 配置 vuex 不需要 npm下载，内置的有，直接引用就行。

// 1. 导入 Vue 和 Vuex import Vue from "vue" import Vuex from "vuex" // 2. 将 Vuex 安装为 Vue 的插件 Vue.use(Vuex) // 3. 创建 Store 的实例对象 const store = new Vuex.Store({ // 挂载 store 模块 modules:{} }) // 向外共享 Store 的实例对象 export default store

2.在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

// 1. 导入 store 的实例对象 import store from './store/store.js' // 省略其它代码... const app = new Vue({ ...App, // 2. 将 store 挂载到 Vue 实例上 store, }) app.$mount()

3. 创建 store 子模块，在 store 目录下创建 cart.js 文件，并写入如下代码：

export default { // 为当前模块开启命名空间 namespaced: true // 模块的 state 数据 state: () => ({ cart: [] }), // 模块的 mutations 方法 mutations:{}, // 模块的 actions 方法 actions:{}, // 模块的 getters 属性 getters: {} }

4. 将 cart.js 文件导入 store.js 文件挂载到 modules 内

import Vue from 'vue' import Vuex from 'vuex' // 1. 导入购物车的 vuex 模块 import moduleCart from './cart.js' Vue.use(Vuex) const store = new Vuex.Store({ // TODO：挂载 store 模块 modules: { // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如： // 购物车模块中 cart 数组的访问路径是 m_cart/cart m_cart: moduleCart, }, }) export default store

5. 测试，随便找个页面导入 vuex看看对不对

// 从 vuex 中按需导出 mapState 辅助方法 import { mapState } from 'vuex' export default { computed: { // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用 // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2']) ...mapState('m_cart', ['cart']), }, }

6. 页面使用，能看到的话就说明没问题了

快递：免运费 -- {{cart.length}}

【本文地址】

公司简介

联系我们